import React, { useState } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import QuickLogin from './QuickLogin';
import InputLogin from './InputLogin';
import AgreementCom from './components/AgreementCom';



export default function Login() {
  // 登录方式 快捷登录 或输入登录
  const [loginType, setLoginType] = useState<'quick' | 'input'>('quick');
  const changeLoginType = () => {
    loginType === 'input' ? setLoginType('quick') : setLoginType('input')
  }
  const [check, setCheck] = useState(false) // 是否同意协议
  // 阅读协议
  const changeCheck = () => {
    setCheck(!check)
  }
  return (
    <View style={styles.root}>
      {
        loginType === 'quick' ?
          <QuickLogin changeLoginType={changeLoginType} /> :
          <InputLogin changeLoginType={changeLoginType} check={check} />
      }
      <AgreementCom check={check} changeCheck={changeCheck} />
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    flexDirection: 'column',
    alignItems: 'center'
  },
  image: {
    width: 200,
    resizeMode: 'contain',
    marginTop: 60
  }
})